import React from 'react';
import { connect } from 'dva';
import { Table, Pagination, Popconfirm, Button, Row, Col, Card, Input, Icon } from 'antd';
import { routerRedux } from 'dva/router';
import styles from './Users.css';
import { PAGE_SIZE } from '../../constants';
import UserModal from './UserModal';
import UseSearch from './Search';

function Users({ dispatch, dict, list: dataSource, loading, total, page: current, result }) {

  function deleteHandler(id) {
    dispatch({
      type: 'users/remove',
      payload: id,
    });
  }

  function pageChangeHandler(page) {
    dispatch(routerRedux.push({
      pathname: '/users',
      query: { page },
    }));
  }

  function editHandler(id, values, cb) {
    dispatch({
      type: 'users/patch',
      payload: { id, values, callback: cb },
    });
  }

  function createHandler(values, cb) {
    dispatch({
      type: 'users/create',
      payload: { values: values, callback: cb },
    });
  }

  function resetErrorHandler() {
    dispatch({
      type: 'users/modalerror',
      payload: { result: {} },
    });
  }

  const modalResult = {
    result: result,
    resetError: resetErrorHandler
  }

  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      render: text => <a href="">{text}</a>,
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: 'Website',
      dataIndex: 'website',
      key: 'website',
    },
    {
      title: 'Operation',
      key: 'operation',
      render: (text, record) => (
        <span className={styles.operation}>
          <UserModal record={record} {...modalResult} onOk={editHandler.bind(null, record.id)}>
            <a>Edit</a>
          </UserModal>
          { '  '}
          <Popconfirm title="Confirm to delete?" onConfirm={deleteHandler.bind(null, record.id)}>
            <a href="">Delete</a>
          </Popconfirm>
        </span>
      ),
    },
  ];

  const userSearchProps = {
    dict: dict,
    formItemLayout: {
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    },
    onSearch(fieldsValue){
      dispatch({
        type: 'users/query',
        payload: fieldsValue
      });
    }
  };

  return (
    <div className={styles.normal}>
      <UseSearch {...userSearchProps} />
      <div style={{ background: '#ECECEC', padding: '30px' }}>
        <Row>
          <Col span="24">
            <Card bordered={false}>
              <div className={styles.create}>
                <UserModal record={{}} {...modalResult} onOk={createHandler}>
                  <Button type="primary">Create User</Button>
                </UserModal>
              </div>
              <Table
                columns={columns}
                dataSource={dataSource}
                loading={loading}
                rowKey={record => record.id}
                pagination={false}
              />
              <Pagination
                className="ant-table-pagination"
                total={total}
                current={current}
                pageSize={PAGE_SIZE}
                onChange={pageChangeHandler}
              />

            </Card>
          </Col>
        </Row>
      </div>
    </div>
  );
}

function mapStateToProps(state) {
  const { dict, list, total, page, result } = state.users;
  return {
    loading: state.loading.models.users,
    dict,
    list,
    total,
    page,
    result,
  };
}

export default connect(mapStateToProps)(Users);
